import React, { useState } from 'react';
import { Column } from '@ant-design/plots';

const GradeComparison: React.FC<any> = () => {
  const data = [
    {
      name: '新能201(李华)',
      yfield: 3,
      xfield: '排名前10%占比',
    },
    {
      name: '新能201(李华)',
      yfield: 13,
      xfield: '排名前30%占比',
    },
    {
      name: '新能211(陈盛华)',
      yfield: 3,
      xfield: '排名前10%占比',
    },
    {
      name: '新能211(陈盛华)',
      yfield: 7,
      xfield: '排名前30%占比',
    },
    {
      name: '新能221(董晓红)',
      yfield: 0,
      xfield: '排名前10%占比',
    },
    {
      name: '新能221(董晓红)',
      yfield: 0,
      xfield: '排名前30%占比',
    },
  ];
  const config = {
    data,
    isGroup: true,
    xField: 'xfield',
    yField: 'yfield',
    seriesField: 'name',

    /** 设置颜色 */
    //color: ['#1ca9e6', '#f88c24'],

    /** 设置间距 */
    // marginRatio: 0.1,
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'middle', 'bottom'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        }, // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        }, // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
  };

  return (
    <>
      <Column {...config} />
    </>
  );
};
export default GradeComparison;
